<template>
  <div>

    <!-- 轮播图 -->
    <van-swipe  class="my-swipe" :autoplay="3000" indicator-color="white" style="height:221px;">
  <van-swipe-item v-for="obj in imgsurl" :key="obj.id">
    <img :src="'http://liufusong.top:8080'+obj.imgSrc" alt="">
  </van-swipe-item>

</van-swipe>
    <!-- /导航 -->
 <div class="navbox">
      <van-search
    class="search-box"
  v-model="value"
  show-action
  label="地址"
  placeholder="请输入小区或地址"
  @search="onSearch"
>
<template #label>

    <div class="van-hairline--right" @click="$router.push('/city')">
       {{city}}
    <van-icon name="arrow-down" />
    </div>
  </template>
  <template #action>
    <van-icon class="mapicon" name="location-o" size="20" @click="$router.push('/map')"/>
  </template>
</van-search>
 </div>

<!-- t中间导航 -->
<van-grid >
  <!-- <van-icon name="wap-home-o" /> -->
  <!-- <van-icon name="map-marked" />
  <van-icon name="friends-o" />
  <van-icon name="shop-collect-o" /> -->
  <van-grid-item   icon="wap-home-o" text="整租" to="/home/list" />
  <van-grid-item icon="friends-o" text="合租" to="/home/list" />
  <van-grid-item icon="map-marked" text="地图找房" to="/map"/>
  <van-grid-item icon="shop-collect-o" text="去出租" to="/rent/add"/>
</van-grid>
<!-- 小标题 -->
<!-- 图片文字 -->
<div class="main">
  <van-cell class="littletitle" title-style="font-weight:bold;font-size:15px" title="租房小组" value="更多" />

<van-grid direction="horizontal" :center="false" :gutter="10"  :column-num="2">
  <van-grid-item  v-for="obj in hotels" :key="obj.id" >
    <div class="box" style="height:50px">
       <van-image :src="'http://liufusong.top:8080'+obj.imgSrc" />
       <div class="right">
         <p>{{obj.title}}</p>
       <p>{{obj.desc}}</p>
       </div>
    </div>
  </van-grid-item>

</van-grid>
</div>
  </div>
</template>

<script>
import { hotcity, hotel } from '@/api/hotel'
import { setStorage, getStorage } from '@/utils/storage'
import { swipe } from '@/api/swipe.js'

export default {
  name: 'home',
  data () {
    return {
      value: '',
      imgsurl: [],
      hotels: [],
      hkzf_city: ''
    }
  },
  created () {
    this.getlocalcity()
    this.getswipeimage()
    this.gethotel()
    this.city = getStorage('hkzf_city').label
  },
  methods: {
    async getlocalcity () {
      if (!getStorage('hkzf_city')) {
        const res = await hotcity()

        setStorage('hkzf_city', res.data.body[0])
      }
    },
    onSearch (val) {
      this.$toast(val)
    },
    onCancel () {
      this.$toast('取消')
    },
    async getswipeimage () {
      const res = await swipe()
      this.imgsurl = res.data.body
    },
    async gethotel () {
      const res = await hotel(getStorage('hkzf_city').value)
      console.log(getStorage('hkzf_city').value)
      console.log(res)
      this.hotels = res.data.body
    }
  }
}
</script>

<style scoped lang="less">

.mapicon {
  margin-right: 10px;
  color: #fff;
}
.van-search {
  // position: fixed;
  // position: absolute;

  background-color: transparent;
}
.navbox{
  position: fixed;
  width: 100%;
  top: 20px;
  padding: 0 10px;
  // background-color: green;
  // width: 100%;
}

/deep/.van-grid-item__content {
  padding: 0;
}
.box {
  display: flex;
  .right {
    margin-top: 10px;
  }
  p {

    margin: 0;
    font-size: 14px;
  }

}
.littletitle {
  background-color: #ccc;
}
.main {
  padding: 5px 10px;
  background-color: #ccc;
}
/deep/.van-grid-item__icon {
  color:green;
  width: 60px;
  height: 60px;
    font-size: 40px;
    line-height: 60px;
    // border-radius: 30px;
    // padding: 30px 0 0 0;
    text-align: center;
    box-sizing: border-box;
}
/deep/.van-grid-item__text {
    color: #646566;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-all;
}

 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    img {
      width: 100%;
      height: 100%;
    }
  }
.van-hairline--right {
  border-right: 1px solid #ccc;
  // margin-left: 15px;
  width: 55px;
}

// /deep/.van-grid-item__content {
//   background-color: pink;
//   padding: 0;

// }
//  /deep/.van-grid-item__text {
//   //  overflow: hidden;
//     margin-top: 10px;
//       color: red;
//     width: 100px;
//     height: 23px;
//   }
  .van-image {
    float: left;
    margin-right: 20px;
    width: 50px !important;
    height: 50px;
  }
</style>
